// 视频播放次数折线图实现
(function() {
    // 等待页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 尝试获取折线图容器元素
        setTimeout(function() {
            const chartContainers = document.querySelectorAll('.dashboard-container .chart-wrapper');
            if (chartContainers.length > 1) {
                // 假设第二个图表容器是用于视频播放次数的
                const chartContainer = chartContainers[1];
                // 创建图表DOM元素
                const chartDiv = document.createElement('div');
                chartDiv.id = 'videoPlayChart';
                chartDiv.style.width = '100%';
                chartDiv.style.height = '300px';
                
                // 清空容器并添加图表元素
                chartContainer.innerHTML = '<h3 style="text-align: center; margin-bottom: 20px; color: #606266;">视频月播放次数</h3>';
                chartContainer.appendChild(chartDiv);
                
                // 初始化图表
                initVideoPlayChart();
            }
        }, 1000);
    });

    // 初始化视频播放次数折线图
    function initVideoPlayChart() {
        // 创建图表实例
        const chart = echarts.init(document.getElementById('videoPlayChart'), 'macarons');
        
        // 显示加载动画
        chart.showLoading();
        
        // 调用后端API获取数据
        fetchVideoPlayData().then(data => {
            // 隐藏加载动画
            chart.hideLoading();
            
            // 设置图表配置项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['播放次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.mothDayText || []
                },
                yAxis: {
                    type: 'value',
                    name: '播放次数',
                    nameTextStyle: {
                        padding: [0, 0, 0, 40]
                    }
                },
                series: [
                    {
                        name: '播放次数',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.mothDayVideoPlayValue || [],
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#5470c6'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(84, 112, 198, 0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(84, 112, 198, 0.1)'
                                }
                            ])
                        }
                    }
                ]
            };
            
            // 设置图表配置项
            chart.setOption(option);
            
            // 监听窗口大小变化，调整图表大小
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }).catch(error => {
            // 隐藏加载动画
            chart.hideLoading();
            console.error('获取视频播放数据失败:', error);
            
            // 显示错误信息
            chart.setOption({
                title: {
                    text: '数据加载失败',
                    left: 'center',
                    top: 'center'
                }
            });
        });
    }

    // 获取视频播放次数数据
    function fetchVideoPlayData() {
        return new Promise((resolve, reject) => {
            // 使用fetch API调用后端接口
            fetch('/api/admin/dashboard/index', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 1 && data.response) {
                    resolve(data.response);
                } else {
                    reject(new Error(data.message || '数据格式错误'));
                }
            })
            .catch(error => {
                // 如果API调用失败，使用模拟数据
                console.warn('API调用失败，使用模拟数据:', error);
                resolve({
                    mothDayText: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    mothDayVideoPlayValue: [12, 23, 19, 34, 25, 30, 28, 36, 38, 42, 39, 45]
                });
            });
        });
    }
})();